import { Flex } from 'antd';
import CarTree from '@/pages/realTimeMonitoring/compoents/CarTree.tsx';
import MapC from '@/components/Map';
import {
  useSetAddedMarkerList,
  useSetSingleAddMarker,
  useSetVideoCarNo,
} from '@/store/realTimeMonitoringStore.ts';
import { useEffect } from 'react';
import { useSpecialLayoutStyle } from '@/hooks';

const RealTimeMonitoring = () => {
  const setVideoCarNo = useSetVideoCarNo();
  const setAddedMarkerList = useSetAddedMarkerList();
  const setSingleAddMarker = useSetSingleAddMarker();
  const { styles } = useSpecialLayoutStyle();

  useEffect(() => {
    return () => {
      setVideoCarNo(undefined);
      setAddedMarkerList([]);
      setSingleAddMarker(undefined);
    };
  }, []);

  return (
    <div className={`relative h-full`}>
      <Flex
        vertical
        className={`absolute left-0 top-0 h-full overflow-hidden rounded-2xl border-r backdrop-blur ${styles.leftWrapper}`}
      >
        <div className={`${styles.breakCrumb} px-10 pb-4 pt-8`}>实时监控</div>
        <CarTree />
      </Flex>
      <MapC />
    </div>
  );
};

export default RealTimeMonitoring;
